<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="./script/common.js"></script>
<script type="text/javascript">
$import("rpc.js");
$import("html/parse.js");
$import("html/format.js");
$import("My97DatePicker/WdatePicker.js");
$import("html/validate.js");

var map;
var infowindow;

/** 页面onLoad，初始化地图 */
function initialize() 
{
	infowindow = new google.maps.InfoWindow();
    var latlng = new google.maps.LatLng(31.534886, 104.56718699999999);
    var myOptions = {
      zoom: 10 ,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var searchControlDiv = document.createElement('DIV');
    addSearchControl(searchControlDiv, map);
    
    searchControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(searchControlDiv);
}

function addMarkers()
{
	var callback = function(result)
  	{
  		var m = result.marker;
  		var latlng1 = new google.maps.LatLng(m.lat, m.lng);
  		var marker = new google.maps.Marker({
  				position: latlng1,
  				map: map,
  				title: m.address
  	    	});
  		attachInfoWindow(marker, m);				//添加多个事件是使用闭包，否则对象无法附加
  	}
	
  	var operation = new Operation("系统.列搜索结果");
  	operation.identify = $("identify").value;
  	operation.name = $("name").value;
  	operation.execute(callback);
}

/** 添加监听事件，显示InfoWindow */
function attachInfoWindow(marker, object) 
{
	var text = "<a href='#' onclick='showDetailPage(" + object.identify + ")'>" + marker.getTitle() + "</a>";
	google.maps.event.addListener(marker, 'click', function() {
		infowindow.setContent(text);
	    infowindow.open(map, marker);
	});
}

/** 创建搜索控件 */
function addSearchControl(controlDiv, map) 
{

	  // Set CSS styles for the DIV containing the control
	  // Setting padding to 5 px will offset the control
	  // from the edge of the map
	  controlDiv.style.padding = '5px';

	  // Set CSS for the control border
	  var controlUI = document.createElement('DIV');
	  controlUI.style.backgroundColor = 'white';
	  controlUI.style.borderStyle = 'solid';
	  controlUI.style.borderWidth = '1px';
	  controlUI.style.borderColor = '#B2CCDD';
	  //controlUI.style.cursor = 'pointer';
	  controlUI.style.textAlign = 'center';
	  //controlUI.title = 'Click to set the map to Home';
	  controlDiv.appendChild(controlUI);

	  // Set CSS for the control interior
	  var controlText = document.createElement('DIV');
	  controlText.style.fontFamily = 'Arial,sans-serif';
	  controlText.style.fontSize = '12px';
	  controlText.style.paddingLeft = '4px';
	  controlText.style.paddingRight = '4px';
	  var search = "输入搜索内容：病例id<input id='identify' type='text' class='form_input_s' />或患者姓名：<input id='name' type='text' class='form_input_s' /><input type='button' value='Search' onclick='addMarkers()'/>";
	  controlText.innerHTML = search;
	  controlUI.appendChild(controlText);
}

function showDetailPage(id)
{
	var arg = {};
	arg.id = id;
	var result = window.showModalDialog("./case_detail.html", arg, "dialogWidth=800px;dialogHeight=1000px");
}

</script>
</head>
<body onload="initialize()">

<div id="loading-indicator"
	style="height: 100%; width: 100%; cursor: wait; position: absolute; top: 0; left: 0;">
<table width="100%" height="90%">
	<tr>
		<td width="100%" height="100%" align="center" valign="middle">
		<div id="loading-text"
			style="height: 34px; width: 82px; padding: 66px 0 0 68px; text-align: left; font-family: 微软雅黑, Tahoma, Arial, Verdana, Tahoma; font-size: 12px; font-weight: bold; color: #777; cursor: wait;">
		正在加载地图<br />
		请稍候...<img src="../images/loading_indicator.gif"></img></div>
		</td>
	</tr>
</table>
</div>

<div id="map_canvas"></div>
</body>
</html>
